<template>
  <!-- 检举记录 -->
  <div class="records">
    <!-- 公共头部标题 -->
    <div class="common-title">
      <div>
        <em></em>
        <span>检举记录</span>
      </div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">纪检监察信息化平台</el-breadcrumb-item>
        <el-breadcrumb-item>检举记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 记录内容部分 -->
    <div class="records-main">

      <!-- 检举记录区分 -->
      <div class="records-tab">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="全部检举"
            name="all"
          ></el-tab-pane>
          <el-tab-pane
            label="待处理"
            name="wait"
          ></el-tab-pane>
          <el-tab-pane
            label="处理中"
            name="doing"
          ></el-tab-pane>
          <el-tab-pane
            label="已完成"
            name="done"
          ></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 检举列表数据 -->
      <div class="records-main-list">
        <!-- 检举记录 -->
        <div
          class="records-item"
          v-for="item in listData"
          :key="item.id"
          v-show="activeName==='all'?true:activeName==item.status"
        >
          <!-- 信息 左 -->
          <div class="records-info">
            <!-- 状态 -->
            <div
              class="records-status"
              :class="item.status"
            >
              {{item.statusTxt}}
            </div>
            <div>
              <div>
                <span>举报人电话：</span>
                <span>{{item.person.phone}}</span>
              </div>
              <div>
                <span>举报人姓名：</span>
                <span>{{item.person.name}}</span>
              </div>
              <div>
                <span>举报人单位：</span>
                <span>{{item.person.company}}</span>
              </div>
            </div>
            <b></b>
            <div class="line"></div>
            <b></b>
            <div>
              <div>
                <span>被举报人姓名：</span>
                <span>{{item.accuse.name}}</span>
              </div>
              <div>
                <span>被举报人单位：</span>
                <span>{{item.accuse.company}}</span>
              </div>
              <div>
                <span>被举报人职务：</span>
                <span>{{item.accuse.job}}</span>
              </div>
            </div>
            <div>
              <div>
                <span>时间：</span>
                <span>{{item.accuse.time}}</span>
              </div>
              <div>
                <span>举报类型：</span>
                <span>{{item.accuse.type}}</span>
              </div>
              <div>
                <span>举报内容：</span>
                <span>{{item.accuse.info}}</span>
              </div>
            </div>
          </div>
          <!-- 操作 -->
          <div class="operate">
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="top"
              :open-delay="500"
            >
              <i
                class="el-icon-document"
                @click="showCur(item)"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              :open-delay="500"
            >
              <i
                class="el-icon-delete-solid"
                @click="delCur(item)"
              ></i>
            </el-tooltip>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'all', // 分类tab
      listData: [
        {
          id: 1,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 12:12:12',
          },
        },
        {
          id: 2,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 11:12:12',
          },
        },
        {
          id: 3,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 10:12:12',
          },
        },
        {
          id: 4,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 09:12:12',
          },
        },
        {
          id: 5,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 08:12:12',
          },
        },
        {
          id: 6,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 07:12:12',
          },
        },
        {
          id: 7,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 12:12:12',
          },
        },
        {
          id: 8,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 11:12:12',
          },
        },
        {
          id: 9,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 10:12:12',
          },
        },
        {
          id: 10,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 09:12:12',
          },
        },
        {
          id: 11,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 08:12:12',
          },
        },
        {
          id: 12,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 07:12:12',
          },
        },
      ], // 检举列表数据
    }
  },
  methods: {
    // 顶部tab切换
    handleClick(tab) {
    },
    // 删除当前记录
    delCur(item) {
      this.$confirm('此操作将永久删除该检举记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listData.map((cur, index, arr) => {
          if (cur.id === item.id) {
            return arr.splice(index, 1)
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 展示检举记录详情
    showCur() {
      this.$router.push('/accuse/accusedetail')
    },
  }
}
</script>

<style scoped lang="less">
.records {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .records-main {
    width: 100%;
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    .records-tab {
      padding: 0 15px;
      box-sizing: border-box;
    }
    .records-main-list {
      height: 0;
      flex: 1;
      overflow: auto;
      padding: 0 15px;
      box-sizing: border-box;
    }
    .records-item {
      width: 100%;
      border-radius: 5px;
      height: 80px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 20px;
      box-shadow: 0px 1px 4px 0px rgba(0, 59, 129, 0.15);
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      justify-content: space-between;
      &:hover {
        box-shadow: 0px 6px 6px 0px rgba(0, 59, 129, 0.15);
      }
      // 状态
      .records-status {
        border-radius: 3px;
        font-size: 14px;
        padding: 0 5px;
        box-sizing: border-box;
        margin-right: 10px;
        white-space: nowrap;
      }
      // 待处理颜色
      .wait {
        border: 1px solid #c91425;
        color: #c91425;
      }
      // 处理中颜色
      .doing {
        border: 1px solid #ff8741;
        color: #ff8741;
      }
      // 已完成颜色
      .done {
        border: 1px solid #1ebda7;
        color: #1ebda7;
      }
      // 信息
      .records-info {
        flex: 1;
        display: flex;
        align-items: center;
        padding-right: 10px;
        box-sizing: border-box;
        > div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 10px;
          > div {
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 200px;
          }
        }
        b {
          width: 10px;
          height: 10px;
          border: 2px solid #dddddd;
          border-radius: 50%;
        }
        .line {
          flex: 1;
          flex-direction: row;
          border: 1px dashed #dddddd;
        }
      }
    }
  }
}
</style>
